<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
 <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
 <title>Div Drag/Resize Demo</title>
 <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
 <script type="text/javascript" src="js2/dragresize.js"></script>
 <script type="text/javascript" src="js2/JDragResize.js"></script>


<style type="text/css">

/* Required CSS classes: must be included in all pages using this script */

/* Apply the element you want to drag/resize */
.drsElement {
 position: absolute;
 border: 1px solid #333;
}

/*
 The main mouse handle that moves the whole element.
 You can apply to the same tag as drsElement if you want.
*/
.drsMoveHandle {
 height: 20px;
 background-color: #CCC;
 border-bottom: 1px solid #666;
 cursor: move;
}

/*
 The DragResize object name is automatically applied to all generated
 corner resize handles, as well as one of the individual classes below.
*/
.dragresize {
 position: absolute;
 width: 5px;
 height: 5px;
 font-size: 1px;
 background: #EEE;
 border: 1px solid #333;
}

/*
 Individual corner classes - required for resize support.
 These are based on the object name plus the handle ID.
*/
.dragresize-tl {
 top: -8px;
 left: -8px;
 cursor: nw-resize;
}
.dragresize-tm {
 top: -8px;
 left: 50%;
 margin-left: -4px;
 cursor: n-resize;
}
.dragresize-tr {
 top: -8px;
 right: -8px;
 cursor: ne-resize;
}

.dragresize-ml {
 top: 50%;
 margin-top: -4px;
 left: -8px;
 cursor: w-resize;
}
.dragresize-mr {
 top: 50%;
 margin-top: -4px;
 right: -8px;
 cursor: e-resize;
}

.dragresize-bl {
 bottom: -8px;
 left: -8px;
 cursor: sw-resize;
}
.dragresize-bm {
 bottom: -8px;
 left: 50%;
 margin-left: -4px;
 cursor: s-resize;
}
.dragresize-br {
 bottom: -8px;
 right: -8px;
 cursor: se-resize;
}

.dragresize-mm {
 top: 50%;
 left: 50%;
 cursor: pointer;
}

</style>

<script type="text/javascript">
//<![CDATA[
 $(function(){
 
 
 
 $('.drsElement').JDragResize();
 
 
 
 
 
 });
//]]>
</script>

</head>
<body style="font: 13px/20px sans-serif; background-color: #FFF">

<div style="text-align: center">
 <h1 style="font: 32px/48px sans-serif">DragResize v1.0</h1>
 by Angus Turnbull - <a href="http://www.twinhelix.com">http://www.twinhelix.com</a>.
 Updated: 27 June 2006.
 <hr />
</div>


<!--
 Here's our draggable elements.
 All that's required is that they have a relative or absolute CSS 'position',
 and are matched by the isElement/isHandle methods of a DragResize object.
 Easy!
-->

<div class="drsElement"
 style="left: 50px; top: 150px; width: 250px; height: 120px;
 background: #CDF; text-align: center">
 <div class="drsMoveHandle">Div 0</div>
 Content
</div>

<div class="drsElement"
 style="left: 20px; top: 300px; width: 150px; height: 200px;
 background: #FDC; text-align: center">
 <div class="drsMoveHandle">Div 1</div>
 Content
</div>

<div class="drsElement drsMoveHandle"
 style="left: 150px; top: 280px; width: 50px; height: 100px;
 background: #DFC; text-align: center">
 Div 2
 Content
</div>

 
</body>
</html>